<template>
        <div class="top">
                <div class="top1"
                     :class="{active: currentIndex==index}"
                     v-for="(item,index) in tabs"
                     :key="index"
                     @click="handleclick(index)">{{item.listname}}</div>
        </div>
</template>

<script>
import eventbus from "../utils/tools"
export default {
        data () {
                return {
                        currentIndex: 0,

                }
        },
        props: ["tabs"],
        methods: {
                handleclick (index) {
                        eventbus.$emit('deliverIndex', index);
                        this.currentIndex = index
                }
        }

}
</script>

<style lang="scss" scoped>
.top {
        display: flex;
        flex-direction: column;
}
.top .top1 {
        width: 50%;
        margin: 26px;
}
.top1.active {
        font-weight: bold;
        border-left: 3px solid red;
}
</style>